<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>


    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


    <title>事项管理清单</title>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">To-do List</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container my-4">


    <div class="mb-3">
        <label for="title">标题</label>
        <input type="text" class="form-control" id="title" aria-describedby="emailHelp"/>
        <small id="emailHelp" class="form-text text-muted">向列表中添加一个待办事项</small
        >
    </div>

    <div class="form-group">
        <label for="description">描述</label>
        <textarea class="form-control" id="description" rows="3"></textarea>
    </div>

    <button id="add" class="btn btn-primary my-3">添加到列表</button>
    <button
            id="clear"
            class="btn btn-primary mx-3 my-3"
            onclick="clearStorage()"
    >清除列表
    </button>

    <div id="items" class="my-4">
        <h2>未完成的事项</h2>
        <table class="table">
            <thead>
            <tr>
                <th scope="col">编号</th>
                <th scope="col">标题</th>
                <th scope="col">事项描述</th>
                <th scope="col">是否完成</th>
            </tr>
            </thead>
            <tbody id="tableBody">
            <tr>
                <th scope="row">1</th>
                <td>Get some coffee</td>
                <td></td>
                <td>
                    <button class="btn-sm btn btn-primary">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
        crossorigin="anonymous"
></script>


<script>
    //获取描述和标题的值
    function getAndupdate() {
        console.log("更新列表");
        tit = document.getElementById("title").value;
        desc = document.getElementById("description").value;
        //把获取的值放进空数组
        //判断localStorage 是否为空
        //空 建立一个数组存 非空直接存
        if (localStorage.getItem("itemsJson") == null) {
            itemJsonArray = [];

            itemJsonArray.push([tit, desc]);
            localStorage.setItem("itemsJson", JSON.stringify(itemJsonArray));
        } else {
            itemJsonArrayStr = localStorage.getItem("itemsJson");
            itemJsonArray = JSON.parse(itemJsonArrayStr);
            itemJsonArray.push([tit, desc]);
            localStorage.setItem("itemsJson", JSON.stringify(itemJsonArray));
        }
        update();
    }

    //渲染
    function update() {
        if (localStorage.getItem("itemsJson") == null) {
            itemJsonArray = [];

            localStorage.setItem("itemsJson", JSON.stringify(itemJsonArray));
        } else {
            itemJsonArrayStr = localStorage.getItem("itemsJson");
            itemJsonArray = JSON.parse(itemJsonArrayStr);
        }
        //表的内容循环输出
        tableBody = document.getElementById("tableBody");
        let str = "";
        itemJsonArray.forEach((Element, index) => {
            str += `
            <tr>
                <th scope="row">${index + 1}</th>
                <td>${Element[0]}</td>
                <td>${Element[1]}</td>
                <td><button class="btn-sm btn btn-primary" onclick="deleted(${index})">删除</button></td>
              </tr>`;
        });
        tableBody.innerHTML = str;
    }

    //监听事件，点击刷新
    add = document.getElementById("add");
    add.addEventListener("click", getAndupdate);
    update();

    function deleted(itemIndex) {
        console.log("Delete", itemIndex);
        itemJsonArrayStr = localStorage.getItem("itemsJson");
        itemJsonArray = JSON.parse(itemJsonArrayStr);
        //从数组中删除itemIndex元素
        itemJsonArray.splice(itemIndex, 1);
        localStorage.setItem("itemsJson", JSON.stringify(itemJsonArray));
        update();
    }

    //本地数据清空
    function clearStorage() {
        if (confirm("你真的想清空所有事项吗?")) {
            console.log("清除存储");
            localStorage.clear();
            update();
        }
    }

</script>
</body>
</html>
